<template>
  <div>
    <nav>
      <ul>
        <li
          v-for="(tab, index) in tabs"
          :key="index"
        >
          <button
            v-html="tab.label"
            @click="selectTab(index)"
            v-bind:class="{active: tab.isActive}"
          ></button>
        </li>
      </ul>
    </nav>
    <slot/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tabs: []
    }
  },
  created () {
    this.tabs = this.$children;
  },
  methods: {
    selectTab(index) {
      for (var i = 0; i < this.tabs.length; i++) {
        this.tabs[i].isActive = (i == index) ? true : false;
      }
    }
  }
}
</script>
